<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云01:导航栏</title>
    <link href="./css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/common.css">
</head>
<style>
    .top-black{
        width: 100%;
        height: 70px;
        background-color: #333333;
        box-sizing: border-box;
        border-bottom: 1px solid #333333;
    }
    .topbar{
        display: flex;
        justify-content: space-between;
        height: 69px;
        line-height: 69px;
    }
    .log{
        background: url('./images/sprite_01.png') no-repeat;
    }
    .log a{
        display: inline-block;
        text-indent: -9999px;
        width: 157px;
        padding-right: 20px;
    }
    .bar-left{
        display: flex;
    }
    .bar-left ul{
        display: flex;
        list-style: none;
    }
    .bar-left ul li a{
        
        padding: 0 19px;
    }
    .bar-left ul li a{
        color: #cccccc;
        display: block;
        font-size: 14px;
    }
    .bar-left ul li:hover a,.bar-left ul .active{
        position: relative;
        background-color: #000000;
        color: #ffffff;
    }
    .bar-left ul .active::after{
        content: "";
        background: url('./images/sprite_01.png') no-repeat -226px 0;
        width: 12px;
        height: 6px;
        position: absolute;
        bottom: -1px;
        left: 50%;
        margin-left: -6px;
    }
    .bar-left-kehuduan{
        position: relative;
    }
    .bar-left-kehuduan::after{
        content: "";
        background: url('./images/sprite_01.png') no-repeat -192px 0;
	    width: 28px;
	    height: 19px;
        position: absolute;
        top: 20px;
        right: -20px;
    }
    .bar-right{
        display: flex;
        align-items: center;
    }
    .bar-right .login{
        padding: 0 22px 0 0;
    }
    .bar-right .login a{
        color: #787878;
    }
    .bar-right .login:hover a {
        color: #ffffff;
    }
    .bar-right .login a:hover{
        color: #787878;
        text-decoration: underline;
    }
    .bar-right .anthor a{
        line-height: 31px;
        margin: 0 20px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid #a09d9d;
        color: #ffffff;
        width: 90px;
        height: 32px;
        border-radius: 30px;
        text-align: center;
    }
    .bar-right .anthor a:hover{
        border: 1px solid #f9f7f7;
    }
    .bar-right .search{
        width: 158px;
        height: 32px;
        background-color: #f9f7f7;
        margin: 0 -5px 0px 10px;
        line-height: 32px;
        border-radius: 32px;
        background-image: url(./images/sprite_01.png);
        background-position: 0 -98px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .search input{
        background-color: #f9f7f7;
        outline: none;
        width: 130px;
        height: 28px;
        margin-right: 5px;
        box-sizing: border-box;
        border-radius: 10px;
        font-size: 12px;
    }
    .top-red{
        height: 35px;
        width: 100%;
        line-height: 35px;
        background-color: rgb(194,12,12);
    }
    .top-red-list{
        display: flex;
        padding-left: 180px;
    }
    .top-red-list li{
        list-style: none;
        padding: 0 13px;
    }
    .top-red-list li a:hover,.top-red-list li .ative{
        background-color: rgb(155,9,9);
    }
    .top-red-list li a{
        padding: 0 19px;
        line-height: 19.9px;
        color: aliceblue;
        display: inline-block;
        height: 19.9px;
        border-radius: 20px;
    }
    .r{
        position: relative;
    }
    .r::after{
        content: "";
        background-image: url(./images/R.png);
        width: 8px;
        height: 8px;
        position: absolute;
        background-size: cover;
    }
</style>
<body>
    <div class="top">
        <div class="top-black">
            <div class="warp_01 topbar">
                <div class="bar-left">
                    <h1 class="log">
                        <a href="">网易云音乐</a>
                    </h1>
                    <ul>
                        <li ><a href="#" class="active">发现音乐</a></li>
                        <li><a href="#">我的音乐</a></li>
                        <li><a href="#">关注</a></li>
                        <li><a href="#">商城</a></li>
                        <li><a href="#">音乐人</a></li>
                        <li><a href="#" class="bar-left-kehuduan">下载客户端</a></li>
                    </ul>
                </div>
                <div class="bar-right">
                    <div class="search">
                        <input type="text" placeholder="音乐/视频/电台/用户">
                    </div>
                    <div class="anthor">
                        <a href="#">创作者中心</a>
                    </div>
                    <div class="login">
                        <a href="#">登录</a>
                    </div>
                </div>
            </div>
        </div>
    
        </div>
        <div class="top-red">
            <div class="warp_01 nav">
                <ul class="top-red-list">
                    <li><a href="#" class="ative">推荐</a></li>
                    <li><a href="#">排行榜</a></li>
                    <li><a href="#" class="r">歌单</a></li>
                    <li><a href="#">主播电台</a></li>
                    <li><a href="#">歌手</a></li>
                    <li><a href="#">新碟上架</a></li>
                </ul>
            </div>
        </div>
</body>
</html>